<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>

      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">交易状态</span>
        <span
          v-for="(item, index) in tradeStatusList"
          :key="index"
          class="select-item"
          :class="[index == tradeStatus ? 'active' : 'normal']"
          style="margin-right: 40px"
          @click="changeTradeStatus(index)"
        >
          {{ item.name }}
        </span>
      </div>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">域名注册商</span>
        <Select v-model="platform" style="width: 150px">
          <Option
            v-for="item in platformList"
            :value="item.id"
            :key="item.id"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="item-name">域名品类</span>
        <Select v-model="domainType" style="width: 150px">
          <Option
            v-for="item in domainTypeList"
            :key="item.value"
            :value="item.value"
            >{{ item.name }}</Option
          >
        </Select>
        <span class="item-name">域名后缀</span>
        <Select v-model="domainSuffix" style="width: 150px">
          <Option
              v-for="item in domainSuffixList"
              :key="item.name"
              :value="item.name"
          >{{ item.name }}</Option
          >
        </Select>
        <span class="item-name">{{ tradeStatus | timeLabel }}</span>
        <DatePicker
            v-model.trim="startUpTime"
            placeholder="开始时间"
            maxlength="30"
            style="width: 120px"
        />
        <div class="two-input-middle"></div>
        <DatePicker
            v-model.trim="endUpTime"
            placeholder="结束时间"
            maxlength="30"
            style="width: 120px"
        />
      </div>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">包含</span>
        <Input
          v-model.trim="name"
          placeholder="请输入关键域名词"
          maxlength="30"
          style="width: 150px"
        />
        <CheckboxGroup v-model="nameLike" style="margin-left: 20px">
          <Checkbox class="radio-mg-r-20" label="开头"></Checkbox>
          <Checkbox class="radio-mg-r-20" label="结尾"></Checkbox>
        </CheckboxGroup>
        <span class="item-name">排除</span>
        <Input
          v-model.trim="nameExclude"
          placeholder="多个用逗号隔开"
          maxlength="30"
          style="width: 150px"
        />
        <CheckboxGroup v-model="nameExcludeLike" style="margin-left: 20px">
          <Checkbox class="radio-mg-r-20" label="开头"></Checkbox>
          <Checkbox class="radio-mg-r-20" label="结尾"></Checkbox>
        </CheckboxGroup>
        <div
            class="user-strong-button line-button-size"
            style="margin: 0px 10px 0px 30px;"
            @click="pageChange(1)"
        >
          搜索
        </div>
        <div class="user-normal-button line-button-size" @click="reset">
          重置
        </div>
      </div>
    </div>
    <div class="user-main-box pub-m-t-20">
      <div class="filter-line search-result-line flx-row-s-c">
        <span class="c-g f-14"
          >搜索结果共<span class="c-black"> {{ pageData.total }} </span>条</span
        >
        <div class="flx-row-s-c pub-m-l-40">
          <div class="user-strong-button line-button-size" @click="batchEdit">
            批量编辑
          </div>
          <router-link
            class="user-strong-button line-button-size"
            style="margin-left: 20px"
            to="/user/dnsell"
          >
            出售域名
          </router-link>
        </div>
      </div>

      <div class="my-domain-table">
        <Table
          :loading="loading"
          ref="pushDomianTable"
          :columns="columns"
          :data="domianList"
          :disabled-hover="true"
          stripe
          @on-select="onSelectEvent"
          @on-select-cancel="onSelectCancelEvent"
          @on-select-all="onSelectAllEvent"
          @on-select-all-cancel="onSelectAllCancelEvent"
        >
          <template slot="opStatus" slot-scope="{ row }">
            {{ row.opStatus | opStatusFilter }}
          </template>
          <template slot="upTime" slot-scope="{ row }">
            {{ row.upTime | timeFilter(tradeStatus, row) }}
          </template>
          <template slot="action" slot-scope="{ row }">
            <div class="line-style normal-f flx-row-c-c" style="justify-content: left;">
              <div
                v-if="row.opStatus !== 2"
                class="form-font-button"
                @click="updateEvent(row)"
              >
                详情
              </div>
              <router-link
                class="form-font-button"
                target="_blank"
                :to="`/whois?domainName=${row.domainName}`"
                >whois</router-link
              >
              <template v-if='row.opStatus !== 4'>
                <div
                  v-if="tradeStatus === 0 || tradeStatus === 2"
                  class="form-font-button"
                  @click="underEvent(row)"
                >
                  {{ tradeStatus | opTradeStatusFilter }}
                </div>
              </template>

            </div>
          </template>
        </Table>
        <div class="form-page-bottom-area flx-row-c-c">
          <!-- <div style="margin-left: -10px">
            <Button class="tab-btn" @click="handleSelectAll">{{
              !selectAll ? "全选" : "取消全选"
            }}</Button>
          </div> -->
          <Page
            :total="pageData.total"
            :current="pageData.page"
            :page-size="pageData.limit"
            :page-size-opts="pageData.pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <commonModal
      ref="putModal"
      :width="800"
      :class-name="'select-domain-modal'"
      :title="'详情'"
      :show.sync="showPut"
      :loading.sync="showPutLoading"
      :is-s-m-s="modalSMS"
      :is-mask="false"
      @confirmEvent="confirmEvent"
      @cancelEvent="cancelEvent"
    >
      <template #content>
        <div class="updatefix">
          <div class="flx-row-s-c row">
            <span class="item-label">域名:</span>
            <span class="c-black">{{ updateInfo.domainName }}</span>
          </div>
          <div class="flx-row-s-c row">
            <span class="item-label">交易结束时间:</span>
            <div style="width: 300px">
              <Select v-model="updateInfo.timeType">
                <Option
                  v-for="item in endTimeList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
          </div>
          <div class="flx-row-s-c row">
            <span class="item-label">价格:</span>
            <div style="width: 300px">
              <Input v-model="updateInfo.price" type="number" />
            </div>
          </div>
          <div class="flx-row-s-c row">
            <span class="item-label">含义:</span>
            <div style="width: 400px">
              <Input
                v-model="updateInfo.comment"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
              />
            </div>
          </div>
          <div class="flx-row-s-c row">
            <span class="item-label">排序:</span>
            <div style="width: 100px">
              <Input v-model="updateInfo.userSort" type="number" />
            </div>
          </div>
        </div>
      </template>
    </commonModal>
    <!-- 批量编辑 -->
    <commonModal
      :show.sync="batchEditShow"
      ref="EditModal"
      :width="1000"
      :class-name="'select-domain-modal'"
      title="批量编辑一口价"
      :is-s-m-s="modalSMS"
      :is-mask="false"
      @confirmEvent="EditconfirmEvent"
      @cancelEvent="EditcancelEvent"
    >
      <template #content>
        <div style="height: 320px; overflow-y: auto">
          <bopTable
            :list.sync="list"
            :total="pageData2.total"
            :page-data="pageData2"
            @remove="removePutData"
            @update="updatePutData"
            @pageChange="putPageChange"
            @pageSizeChange="putPageSizeChange"
          />
        </div>
      </template>
    </commonModal>
  </div>
</template>

<script>
import { bopBatchEdit } from "@/api/user";
import { pullAllWith, isEqual } from "lodash";
import { fixEdit, getFixSale, getFixUp, getFixDown } from "@/api/user";
import { mapGetters } from "vuex";
export default {
  name: "VipMyBopDn",
  components: {
    commonModal: () => import("_c/modal/commonModal/index"),
    bopTable: () => import("_c/table/boptable"),
  },
  filters: {
    numFilter(val, pageData) {
      return (pageData.page - 1) * pageData.limit + val + 1;
    },
    platformFilter(val) {
      let title = "--";
      if (val === 0) {
        title = "190";
      } else if (val === 1) {
        title = "GD";
      }
      return title;
    },
    opStatusFilter(val) {
      let title = "--";
      if (val === 0) {
        title = "已下架";
      } else if (val === 1) {
        title = "出售中";
      } else if (val === 2) {
        title = "成交";
      } else if (val === 3) {
        title = "过期已下架";
      } else if (val === 4) {
        title = "管理员下架";
      }
      return title;
    },
    tradeStatusFilter(val) {
      let title = "--";
      if (val === 0) {
        title = "出售中";
      } else if (val === 1) {
        title = "拍下域名";
      } else if (val === 2) {
        title = "域名过户";
      } else if (val === 3) {
        title = "交易成功";
      }
      return title;
    },
    opTradeStatusFilter(val) {
      let title = "--";
      if (val === 0) {
        title = "下架";
      } else if (val === 2) {
        title = "上架";
      }
      return title;
    },
    operationFilter(val) {
      let title = "--";
      if (val === 1) {
        title = "下架";
      } else if (val === 0) {
        title = "上架";
      }
      return title;
    },
    timeLabel(val) {
      let title = "上架时间";
      switch (val) {
        case 0:
          title = "上架时间";
          break;
        case 1:
          title = "成交时间";
          break;
        case 2:
          title = "下架时间";
          break;
      }
      return title;
    },
    timeFilter(val, type, item) {
      let title = "";
      switch (type) {
        case 0:
          title = item.upTime;
          break;
        case 1:
          title = item.tradeTime;
          break;
        case 2:
          title = item.downTime;
          break;
      }
      return title;
    },
  },
  data() {
    return {
      breadCrumb: [{name: "管理中心"},{ name: "我是卖家" }, { name: "发布的一口价" }],
      tablist: [
        {
          name: "发布的一口价",
          to: "/user/mybopdn",
        },
      ],
      columns: [
        {
          width: 60,
          type: "selection",
          align: "center",
        },
        { title: "序号", type: "index", width: 80, align: "center" },
        {
          title: "域名",
          key: "domainName",
          align: "left",
        },
        {
          title: "注册商",
          key: "amount",
          align: "left",
          render: (h, params) => {
            return h("span", params.row.platform === 0 ? "190" : "GD");
          },
        },
        {
          title: "价格",
          key: "price",
          align: "left",
        },
        {
          title: "上架时间",
          slot: "upTime",
          align: "left",
        },
        {
          title: "状态",
          slot: "opStatus",
          align: "left",
        },
        {
          width: 150,
          title: "操作",
          slot: "action",
          align: "left",
        },
      ],
      selectAll: false,
      // 保存选中的数据
      list: [],
      selectList: [],
      batchEditShow: false,

      classify: ["出售中", "已出售", "已下架"],
      classifySelect: 0,
      waitingTime: [
        {
          name: "全部",
          select: true,
        },
        {
          name: "3月8日",
          select: false,
        },
        {
          name: "3月9日",
          select: false,
        },
        {
          name: "3月10日",
          select: false,
        },
      ],
      test: "",
      platform: -1,
      platformList: [
        {
          id: 0,
          label: "190",
        },
        {
          id: 1,
          label: "GD",
        },
      ],
      searchMethod: [],
      // 域名品类
      domainType: -1,
      domainTypeList: [],
      // 交易状态
      tradeStatus: 0,
      tradeStatusList: [
        {
          value: 0,
          name: "出售中",
        },
        {
          value: 1,
          name: "已出售",
        },
        {
          value: 2,
          name: "已下架",
        },
      ],
      // 域名后缀
      domainSuffix: "",
      domainSuffixList: [],
      // 成交时间
      startUpTime: "",
      endUpTime: "",
      // 域名包含
      name: "",
      nameLike: [],
      // 域名排除
      nameExclude: "",
      nameExcludeLike: [],
      // 表格加载状态
      loading: false,
      // 域名列表
      domianList: [],

      // 分页设置
      pageData: {
        // 域名总数
        total: 0,
        // 页码
        page: 1,
        // 分页调试
        limit: 10,
      },
      pageData2: {
        // 域名总数
        total: 0,
        // 页码
        page: 1,
        // 分页调试
        limit: 10,
      },
      // 打开修改弹出层
      showPut: false,
      showPutLoading: false,
      endTimeList: [
        { id: 0, label: "长期" },
        { id: 1, label: "6个月" },
        { id: 2, label: "3个月" },
        { id: 3, label: "1个月" },
        { id: 4, label: "7天" },
      ],
      updateInfo: {
        id: 0,
        domainName: "",
        timeType: 0,
        price: "",
        comment: "",
      },
      // 上架出售弹出层验证码
      modalSMS: true,
    };
  },
  head() {
    return {
      title: this.defaultTdk.title,
      meta: [
        { name: "keywords", content: this.defaultTdk.keywords },
        { name: "description", content: this.defaultTdk.description },
      ],
    };
  },
  computed: {
    ...mapGetters({ defaultTdk: "getDefaultTdk" }),
  },
  async mounted() {
    const data = await this.$storage.getDomainQueryTerm();
    this.domainSuffixList = data.domainSuffixList;
    this.domainTypeList = data.domainTypeList;
    this.getList();
  },
  methods: {
    // 全选
    handleSelectAll() {
      this.selectAll = !this.selectAll;
      this.$refs.pushDomianTable.selectAll(this.selectAll);
    },
    // checkbox全选的数据
    onSelectAllEvent(selection) {
      this.selectAll = true;
      this.selectList = selection;
    },
    // checkbox取消全选的数据
    onSelectAllCancelEvent() {
      this.selectAll = false;
      this.selectList = [];
    },
    // checkbox单个选中数据
    onSelectEvent(selection, row) {
      this.selectList.push(row);
      if (
        this.selectList.length > 0 &&
        this.selectList.length == this.list.length
      )
        this.selectAll = true;
    },
    // checkbox单个取消数据
    onSelectCancelEvent(selection, row) {
      this.selectList = pullAllWith(this.selectList, [row], isEqual);
      this.selectAll = false;
    },
    batchEdit() {
      this.putPageChange(1);
      if (this.list.length <= 0) {
        this.$Message.warning("请选择勾选要编辑的数据!");
        return false;
      }
      this.pageData2.total = this.selectList.length;
      this.batchEditShow = true;
    },

    // 确认修改
    async confirmEvent(val) {
      try {
        this.showPutLoading = true;
        const reqData = {
          comment: this.updateInfo.comment,
          id: this.updateInfo.id,
          price: this.updateInfo.price,
          timeType: this.updateInfo.timeType,
          userSort: this.userSort,
          code: val,
        };
        const { code, result } = await fixEdit(reqData);
        if (code === 200 && result) {
          this.$Message.success("提交成功！");
          this.showPut = false;
          this.$refs.putModal.cleanCode();
          this.getList();
        } else {
          this.$Message.warning("操作失败!");
        }
        this.showPutLoading = false;
      } catch (error) {
        this.showPutLoading = false;
      }
    },
    // 取消修改
    cancelEvent() {
      this.showPut = false;
    },
    async EditconfirmEvent(code) {
      if (this.selectList <= 0) {
        this.$Message.warning("请选择要编辑的数据!");
        return false;
      }
      const reqData = this.selectList.map((o) => {
        return {
          id: o.id,
          comment: o.comment,
          price: o.price,
          timeType: o.timeType,
          userSort: o.userSort,
        };
      });
      const res = await bopBatchEdit({
        code: code,
        list: reqData,
      });
      if (res.code == 200) {
        this.$Message.success("编辑成功!");
        this.EditcancelEvent();
        this.selectList = [];
        this.getList();
        this.selectAll = false;
      }
    },
    EditcancelEvent() {
      this.batchEditShow = false;
      this.list = [];
    },
    // 删除选中数据
    removePutData(key) {
      this.selectList = this.selectList.filter((o) => o.domainName !== key);
      this.pageData2.total = this.selectList.length;
      this.list = this.selectList.slice(
        (this.pageData2.page - 1) * this.pageData2.limit,
        this.pageData2.limit * this.pageData2.page
      );
    },
    // 修改选中价数据
    updatePutData(event) {
      this.list[event.index][event.key] = event.value;
    },

    // 选中分页
    putPageChange(val) {
      this.pageData2.page = val;
      this.list = this.selectList.slice(
        (this.pageData2.page - 1) * this.pageData2.limit,
        this.pageData2.limit * this.pageData2.page
      );
    },
    putPageSizeChange(val) {
      this.pageData2.limit = val;
      this.list = this.selectList.slice(
        (this.pageData2.page - 1) * this.pageData2.limit,
        this.pageData2.limit * this.pageData2.page
      );
    },
    changeTradeStatus(val) {
      this.tradeStatus = val;
      this.pageChange(1);
    },
    // 获取列表
    async getList() {
      const params = {
        name: this.name,
        nameExclude: this.nameExclude,
        page: this.pageData.page,
        limit: this.pageData.limit,
      };
      this.platform !== -1 && (params.platform = this.platform);
      this.domainType !== -1 && (params.domainType = this.domainType);
      this.tradeStatus !== -1 && (params.status = this.tradeStatus);
      this.domainSuffix !== "" && (params.suffix = this.domainSuffix);
      this.nameLike.length === 1 &&
        (params.nameLike = parseInt(this.nameLike[0]));
      this.nameExcludeLike.length === 1 &&
        (params.nameExcludeLike = parseInt(this.nameExcludeLike[0]));
      this.startUpTime && (params.startUpTime = this.startUpTime);
      this.endUpTime && (params.endUpTime = this.endUpTime);

      this.loading = true;
      const res = await getFixSale(params);
      if (res.code === 200) {
        this.domianList = res.data.list;
        this.pageData.total = res.data.total;
      }
      this.loading = false;
    },
    // 重置
    reset() {
      this.resetSign = !this.resetSign;
      this.name = "";
      this.nameLike = [];
      this.nameExclude = "";
      this.nameExcludeLike = [];
      this.domainSuffix = "";
      this.domainType = -1;
      this.tradeStatus = -1;
      this.platform = -1;
      this.startUpTime = "";
      this.endUpTime = "";
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.pageData.page = page;
      this.getList();
    },
    pageSizeChange(pageSize) {
      this.pageData.limit = pageSize;
      this.pageChange(1);
    },
    // 上架操作
    async fixUp(val) {
      try {
        this.loading = true;
        const { code, result } = await getFixUp({ id: val });
        this.loading = false;
        if (code === 200 && result) {
          this.$Message.success("操作成功！");
          this.getList();
        }
      } catch (error) {
        this.loading = false;
      }
    },
    async fixDown(val) {
      try {
        this.loading = true;
        const { code, result } = await getFixDown({ id: val });
        this.loading = false;
        if (code === 200 && result) {
          this.$Message.success("操作成功！");
          this.getList();
        }
      } catch (error) {
        this.loading = false;
      }
    },
    // 修改一口价
    updateEvent(item) {
      this.showPut = true;
      this.updateInfo.id = item.id;
      this.updateInfo.domainName = item.domainName;
      this.updateInfo.timeType = item.timeType || 0;
      this.updateInfo.price = item.price;
      this.updateInfo.comment = item.comment;
    },
    // 操作选项
    underEvent(item) {
      if (item.opStatus === 1) {
        // 下架
        this.fixDown(item.id);
      } else if (item.opStatus === 0) {
        // 上架
        this.fixUp(item.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-domain-table /deep/ {
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      color: #000;
      &:nth-child(1) {
        padding-left: 0;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      box-sizing: border-box;
    }
    .ivu-table-row {
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
      }
    }
  }
  .tab-btn:hover {
    color: $mainColor;
    border-color: $mainColor;
  }
  .tab-btn:focus {
    box-shadow: none;
  }
  // .ivu-checkbox-checked .ivu-checkbox-inner {
  //   border-color: #fc461e;
  //   background-color: #fc461e;
  // }
}

.mg-r-25 {
  margin-right: 25px;
}
.updatefix {
  padding: 20px 0;
  .row {
    padding: 5px 0;
    .item-label {
      color: #000;
      width: 150px;
      padding: 0 20px;
      font-size: 16px;
      text-align: right;
    }
  }
}
.form-font-button {
  margin: 0 5px 0 0!important;
}
</style>
